<template>
<div id="FunBack">
    <div v-if="dragState" class="Back" id="DragBack" @click="unPosition()">
        <div class="flex">可以自由拖拽,手机端不兼容</div>
    </div>
    <div id="Fun" ref="Fun" :style="FunStyle">
        <div v-for="(item,index) in getFunData" :key="index" class="iconBox flex" @click="beforeClick(item)" >
            <font-awesome-icon :icon="item.icon" class="icon" />
        </div>
    </div>
</div>
</template>
<script>
import {mapMutations} from 'vuex'
import Drag from '@/common/drag'
import { watch } from 'vue'
  export default 
  {
     name :'', 
     data() {
        return {
            state:0,
            dragState:false,
            drag:null,
            FunStyle:{
                height:'40px'
            },
            funData:[
                {name:'缩放',icon:'angles-down',type:1,args:{state:0,time:500,count:1},click:this.changeState},   
                {name:'设置',icon:'gear',type:1,click:this.SETTINGON},
                {name:'播放',icon:'music',type:1,click:this.SETSTATE,args:2},
                {name:'顶部',icon:'jet-fighter-up',type:1,click:this.toTop},
                {name:'刷新',icon:'arrow-rotate-right',type:1,click:this.refresh},      
                {name:'定位',icon:'up-down-left-right',type:1,click:this.position}, 
                {name:'展开',icon:'angles-up',args:{state:1,time:0,count:6},click:this.changeState,type:0},         
            ]
        }
     },
     computed:{
        getFunData(){
           return this.funData.filter(item => item.type == this.state)
        }
     },
     methods:{
        ...mapMutations('Setting',['SETTINGON']),
        ...mapMutations('Music',['SETSTATE']),
        beforeClick(item){
          if(item.click == null) return this.$message.error('功能暂未实现')
          item.click(item.args)
        },
        //切换状态
        changeState({state,time,count,height}){
            if(this.dragState) return // 拖拽状态

            let timer= setTimeout(() => {
                this.state=state,
                clearTimeout(timer)
            },time)
            height = count * 40 + 'px'
            this.FunStyle ={height}
        },
        //回到顶部
        toTop(){
             let from = document.documentElement.scrollTop || document.body.scrollTop || 0
            this.$public.Move(from,0,500)
        },
        //刷新
        refresh(){
            location.reload()
        },
        //位置拖拽
        position(){
            this.changeState({state:0,time:500,count:1})  
             this.dragState =true
            this.state=0
            document.body.style.overflow='hidden'
            this.init()
        },
        unPosition(){
           this.dragState =false
           document.body.style.overflow='auto'
           if(this.drag) this.drag.uninit()
           this.drag=null
        },
        init(){
            if(this.$refs.Fun) {
                let maxTop  = 0 
                let maxLeft = 0
                this.drag=new Drag({box:this.$refs.Fun,duration:'0.5s',size:40})
                this.drag.init()
            }
        }
    },

  }
</script>
<style scoped lang="less">
*{
    --iconBoxSize:35px;
}
#FunBack{
    position: fixed;
    z-index: 998;
}
#DragBack{
    z-index: 100;
    background: rgba(0, 0, 0, 0.3);
    div{
        position: absolute;
        top: 10px;
        color: white;
        font-size: 20px;
        padding: 20px 100px;
        background: rgba(0, 0, 0, 0.9);
        box-shadow: 0 0 5px white;
        border-radius: 5px;
    }
}

#Fun{
     width: var(--iconBoxSize);
    position: fixed;
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    transition-duration: 0.5s;
    z-index: 101;
}
.iconBox{
    width: var(--iconBoxSize);
    height: var(--iconBoxSize);
    background: var(--GeneralBackColor);
    margin-top: 5px;
    border-radius: 5px;
    transition-duration: 0.5s;

    .icon{
        color: white;
    }
}

</style>